<template>
  <div class="shop-item">
    <!-- {{item}} -->
       <div class="item-selector">
           <check-button :is-checked="item.checked" @click.native="checkClick"></check-button>
       </div>
       <div class="item-img">
          <img :src="item.image" alt="">
       </div>
       <div class="item-info">
          <div class="item-title">{{item.title}}</div>
          <!-- <div class="item-desc">{{item.desc}}</div> -->
          <div class="info-bottom">
             <div class="item-price left">￥{{item.realPrice}}</div>
             <div class="item-count right">X{{item.count}}</div>
          </div>
       </div>
  </div>
</template>
<script>
//公共组件
import CheckButton from 'components/content/checkButton/CheckButton'
export default {
  name: 'Cartlistitem',
  components: {
     CheckButton
    },
  directives: {  },
  props:{
    item:{
      type:Object,
      default(){
        return {}
      }
    }
  },
  data() {
    return {
      
    };
  },
  mounted() {
   
  },
  methods: {
     checkClick(){
       this.item.checked=!this.item.checked
     }
  },
};
</script>
<style  scoped>
  .shop-item{
    width:100%;
    height: 60px;
    display: flex;
    flex-flow: row nowrap;
    justify-content:left;
    margin:4px 0;
  }
 .item-selector{
   width: 20px;
   height: 20px;
   align-self: center;
   margin:0 10px;
   border-radius: 50%;
 }
 .item-img{
   width: 50px;
   height:50px;
   border-radius: 5px;
   overflow: hidden;
   margin:0 10px;
   align-self: center;
 }
 .item-img img{
   display: block;
   width: 100%;
   height: 100%;
 }
 .item-info{
   width:70%;
   padding-right:10px;
   align-self: center;
   font-size: 15px;
   text-align: justify;
 }
.item-title,.item-desc{
   white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
 }
</style>